<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>基金净值</title>
    <link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../build/css/style.css">
</head>
<body>
<div id="container" style="padding-bottom:10px;">
    <div class="history-value">
        <ul class="value-title1  clear-fix">
            <li>日期</li>
            <li>万份收益</li>
            <li>七日年化</li>
        </ul>
        <ul class="value-con1 clear-fix">
            <li class="clear-fix" v-for="item in valueList">
                <span>{{item.aprDate | formatTime}}</span>
                <span>{{item.copiesBenefit }}</span>
                <span>{{item.avgApr }}%</span>
            </li>
            <!--<li class="clear-fix">-->
                <!--<span>2017-03-06</span>-->
                <!--<span>1.1525</span>-->
                <!--<span>2.1520</span>-->
            <!--</li>-->
        </ul>
    </div>
    <div class="empetDate">
        <span class="iconfont">&#xe602;</span>
        抱歉！没找到更多数据
    </div>
</div>
<script src="../../build/public/vue.js" charset="utf-8"></script>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>

<script type="text/javascript">
    var vm = new Vue({
        el:"#container",
        data:{
            idStr:'',
            page:1,
            valueList:[],
            pageCount:'',
        },
        mounted:function(){
            this.$nextTick(function(){
                vm.idStr = vm.getParameter('idStr');
                this.getList();
                refresh(this.refreshData());    //监听滚动到底部->触发refreshData()
            })
        },
        methods:{
            //获取列表数据
            getList:function(){
                loader.init();
                get('/product/publicFund/monetaryFundAprPage',{
                    currentPage:vm.page,
                    publicFundId:vm.idStr,
                    startDay:'',
                    endDay:'',
                },function(res){
                    vm.pageCount = res.data.totalCount/res.data.pageSize;
                    vm.valueList = vm.valueList.concat(res.data.resultList);
                    if(res.data.resultList.length == 0){          //没请求到数据，判断为到底部
                        refreshText('到底了哦！')
                    }else{
                        refreshText('上拉加载更多数据')
                    }
                    if(vm.valueList.length == 0){                   //总数据为空，判断为没有产品数据
                        document.querySelector('.empetDate').style.display = 'block';
                        refreshText('')
                    }else{
                        document.querySelector('.empetDate').style.display = 'none';
                    }
                    if(vm.valueList.length <5){                     //当次请求数据小于5,判断为没有下一页数据
                        refreshText('')
                    }
                    loader.remove();
                })
            },
            changeColor:function(str){
                if(str>=0){
                    return true;
                }else{
                    return false;
                }
            },
            getParameter:function(name){    //获取链接中参数
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            },
            refreshData:function(){           //触发上拉加载后的回调
                return function(){
                    if(vm.page > vm.pageCount){
                        refreshText('到底了哦！')
                    }else {
                        vm.page++;
                        vm.getList();
                    }
                }
            }
        }
    })
</script>

</body>
</html>
